<template>
  <div class="philanthropy-container">
    <div class="philanthropy-main" v-if="articleList.length">
      <div class="philanthropy-item" v-for="(item, index) in articleList" :key="index" @click="toDetails(item)">
        <div class="left-container">
          <img :src="imgUrl + item.indexpic" alt />
        </div>
        <div class="rigth-container">
          <div class="name" :class="item.isread === 0 && 'no-read'">{{ item.title }}</div>
          <div class="desc" v-html="item.content"></div>
        </div>
      </div>
    </div>
    <van-empty description="暂无公益信息" v-else />
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleList: []
    }
  },
  computed: {
    imgUrl() {
      return this.$imgUrl;
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList () {
      const res = await this.$fetchGet('/home/info/lists', {
        id: 2
      })
      if (!res.success) {
        this.$toast(res.msg)
        return
      }
      this.articleList = res.data.list
    },
    toDetails (item) {
      console.log(item)
      this.$router.push({
        path: '/philanthropy-details',
        query: {
          id: item.id
        }
      })
    }
  }
};
</script>

<style lang="scss">
.philanthropy {
  &-item {
    display: flex;
    padding: 30px 0;
    margin: 0 30px;
    border-bottom: 1px solid #dbdbdb;
    .left-container {
      img {
        width: 150px;
        height: 150px;
      }
    }
    .rigth-container {
      flex: 1;
      margin-left: 30px;
      .name {
        font-size: 30px;
        font-weight: 600;
        color: #0b0b0b;
        margin-bottom: 10px;
        &.no-read {
          color: #ff4949;
        }
      }
      .desc {
        font-size: 25px;
        color: #999999;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>